<!DOCTYPE html>
<html>
    <head>
        <title>快团团导单</title>
        <link rel="stylesheet" href="../static/css/ej.css">
        <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body style="background-color:#fffbf6">
        {% include 'top_bar.html' %}
        <div><h4>文件名信息</h4></div>
        <div><input id="fnInfo"  style="height:30px;width:300px;" value="{{fnInfoDefault}}">
        </div>

        <br>
        <div>
            <label for="expMode">导单模板</label>
            <select id="expMode" style="width:120px;height:30px;" onchange="fetchSpec();refillFnInfo();">
                {% for mode in expMode %}
                    <option value="{{ mode }}">{{ mode }}</option>
                {% endfor %}
            </select>
        </div>

        <div><h4>发货人</h4></div>
        <div><input id="senderName" value="{{senderNameDefault}}" style="height:30px;width:300px;">
        </div>

        <div><h4>发货人电话</h4></div>
        <div><input id="senderTel" value="{{senderTelDefault}}" style="height:30px;width:300px;">
        </div>
        
        <hr>
        <div id='block01' style="padding:8px;">
            <div><h4>规格一</h4></div>
            <div><input id="spec0" style="height:30px;width:300px;" value="{{specName0}}" >
            </div>

            <div><h4>详单一</h4></div>
            <div><textarea id='buyList0' style="height:150px;width:300px;" placeholder="收件人【空格】收件人电话【空格】收件人地址，数量&#10;&#10;例如：&#10;&#10;赵女士 13899998888 广西壮族自治区南宁市青秀区XX路8号，1&#10;王女士 13029359235 广东省广州市白云区XX路21号，3"></textarea></div>
       
        </div>

        
        <div id='block02' style="background-color: bisque;padding: 8px;">
            <div><h4>规格二</h4></div>
            <div><input id="spec1" style="height:30px;width:300px;" value="{{specName1}}">
            </div>

            <div><h4>详单二</h4></div>
            <div><textarea id='buyList1' style="height:150px;width:300px;"></textarea></div>
       
        </div>

        
        <div id='block03' style="padding:8px;">
            <div><h4>规格三</h4></div>
            <div><input id="spec2" style="height:30px;width:300px;" value="{{specName1}}">
            </div>

            <div><h4>详单三</h4></div>
            <div><textarea id='buyList2' style="height:150px;width:300px;"></textarea></div>
    
        </div>

        
        <div id='block04' style="background-color: bisque;padding: 8px;">
            <div><h4>规格四</h4></div>
            <div><input id="spec3" style="height:30px;width:300px;" value="{{specName1}}">
            </div>

            <div><h4>详单四</h4></div>
            <div><textarea id='buyList3' style="height:150px;width:300px;"></textarea></div>
      
        </div>

        
        <div id='block05' style="padding:8px;">
            <div><h4>规格五</h4></div>
            <div><input id="spec4" style="height:30px;width:300px;" value="{{specName1}}">
            </div>

            <div><h4>详单五</h4></div>
            <div><textarea id='buyList4' style="height:150px;width:300px;"></textarea></div>
     
        </div>

        
        <div id='block06' style="background-color: bisque;padding: 8px;">
            <div><h4>规格六</h4></div>
            <div><input id="spec5" style="height:30px;width:300px;" value="{{specName1}}">
            </div>

            <div><h4>详单六</h4></div>
            <div><textarea id='buyList5' style="height:150px;width:300px;"></textarea></div>
  
        </div>

        
        <div id='block07' style="padding:8px;">
            <div><h4>规格七</h4></div>
            <div><input id="spec6" style="height:30px;width:300px;" value="{{specName1}}">
            </div>

            <div><h4>详单七</h4></div>
            <div><textarea id='buyList6' style="height:150px;width:300px;"></textarea></div>
      
        </div>

        
        <div id='block08' style="background-color: bisque;padding: 8px;">
            <div><h4>规格八</h4></div>
            <div><input id="spec7" style="height:30px;width:300px;" value="{{specName1}}">
            </div>

            <div><h4>详单八</h4></div>
            <div><textarea id='buyList7' style="height:150px;width:300px;"></textarea></div>
        </div>
        
        <hr>
        
        <div id="dl" style="margin-top:10px;display: none;"><a href="{{ url_for('zip_and_download_ktt_exp_order') }}" onclick="hideDownload()">下载文件</a></div>
        <div id="wxTxt" style="margin-top:10px;"></div>
        <br>
        <div><button id="submit" onclick="submit()">导单</button></div>
        <div id="result" style="color: #a9474b;"></div>



    <script src="../static/js/common.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function(){
            const fnInfo=document.getElementById('fnInfo');
            const todayStr=getTodayStr();
            // fnInfo.value="团团好果，"+todayStr+"，01，脆蜜金桔";
            fnInfo.value=fnInfo.value.replace("$date$",todayStr)
            // console.log('start');
            // console.log(todayStr,"团团好果，"+todayStr+"，01，脆蜜金桔");
            // console.log(specName0);
            fetchSpec();

        });

        function refillFnInfo(){
            const fnBox=document.getElementById('fnInfo');
            const specName=document.getElementById('expMode').value;
            const strParts=fnBox.value.split('，');
            strParts[strParts.length-1]=specName;
            fnBox.value=strParts.join('，');
            // console.log(fnBox.value);
        }

        function fetchSpec(){
            const supplier=document.getElementById("expMode").value;     
            const data={"supplier":supplier}       
            fetch('/ktt_return_spec', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body:JSON.stringify(data)
                    })
                  .then(response => response.json())
                  .then(data => {
                      console.log(data['res']);    
                      if(data['res']==='ok'){
                        // console.log(Object.values(data['data']).length,data['data'])   
                        const specArr=Object.values(data['data']);                        
                        document.getElementById("spec0").value=specArr[0]?specArr[0]:"";
                        document.getElementById("spec1").value=specArr[1]?specArr[1]:"";    
                        document.getElementById("spec2").value=specArr[2]?specArr[2]:"";     
                        document.getElementById("spec3").value=specArr[3]?specArr[3]:"";     
                        document.getElementById("spec4").value=specArr[4]?specArr[4]:"";     
                        document.getElementById("spec5").value=specArr[5]?specArr[5]:"";     
                        document.getElementById("spec6").value=specArr[6]?specArr[6]:"";     
                        document.getElementById("spec7").value=specArr[7]?specArr[7]:"";         
                        
                        for(i=0;i<8;i++){
                            // console.log(`block0${i+1}`,i)
                            const divId=document.getElementById(`block0${i+1}`);
                            if(i>=specArr.length){
                                divId.style.display='none';
                            }else{
                                divId.style.display='block';
                            }
                           
                        }
                                           
                      }
                  })
                  .catch(error => {
                      console.error('Error:', error);                      
                  });

        }

        


        function submit(){
            const fnInfo=document.getElementById('fnInfo').value;
            const expMode=document.getElementById('expMode').value;
            const senderName=document.getElementById('senderName').value;
            const senderTel=document.getElementById('senderTel').value;
            const spec0=document.getElementById('spec0').value;
            const buyList0=document.getElementById('buyList0').value;
            const spec1=document.getElementById('spec1').value;
            const buyList1=document.getElementById('buyList1').value;
            const spec2=document.getElementById('spec2').value;
            const buyList2=document.getElementById('buyList2').value;
            const spec3=document.getElementById('spec3').value;
            const buyList3=document.getElementById('buyList3').value;
            const spec4=document.getElementById('spec4').value;
            const buyList4=document.getElementById('buyList4').value;
            const spec5=document.getElementById('spec5').value;
            const buyList5=document.getElementById('buyList5').value;
            const spec6=document.getElementById('spec6').value;
            const buyList6=document.getElementById('buyList6').value;
            const spec7=document.getElementById('spec7').value;
            const buyList7=document.getElementById('buyList7').value;
            


            const wxTxt=document.getElementById('wxTxt')

            wxTxt.value='';
            // console.log(storedClassInfo);
            const data={
                'fn_info':fnInfo,
                'exp_mode':expMode,
                'sender_name':senderName,
                'sender_tel':senderTel,
                'spec0':spec0,
                'buy_list0':buyList0,
                'spec1':spec1,
                'buy_list1':buyList1,
                'spec2':spec2,
                'buy_list2':buyList2,
                'spec3':spec3,
                'buy_list3':buyList3,
                'spec4':spec4,
                'buy_list4':buyList4,
                'spec5':spec5,
                'buy_list5':buyList5,
                'spec6':spec6,
                'buy_list6':buyList6,
                'spec7':spec7,
                'buy_list7':buyList7
            }

            fetch('/ktt_deal_list', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body:JSON.stringify(data)
                    })
                  .then(response => response.json())
                  .then(data => {
                      console.log(data);    
                      if(data['res']==='ok'){
                        document.getElementById('dl').style.display='block';
                        wxMsg=fnInfo.split('，');
                        wxTxt.innerText=wxMsg[1]+' 第'+wxMsg[2]+'批 '+wxMsg[3]+' '+data['wx_txt'];
                        console.log('ktt download')     
                      }
                  })
                  .catch(error => {
                      console.error('Error:', error);
                      document.getElementById('dl').style.display='none';
                      alert("提交失败，请稍后再试");
                  });


        }


        function hideDownload(){
            const dl=document.getElementById('dl');
            // const prompt=document.getElementById('prompt');
            // prompt.innerText='';
            // prompt.style.display='block';
            dl.style.display='none';
        }


    </script>
    
    </body>